<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.7.0.min.js"></script>
		<style>
			h1{
				text-align: center;
			}
			table{
				margin: 0 auto;
				width: 60%;
				border: 2px solid #aaa;
				border-collapse: collapse;
			}
			table th,table td{
				border: 2px solid #aaa;
				padding: 5px;
			}
			th{
				background-color: #eee;
			}
		</style>
		<script>
			function add_shoppingcart(btn){
				//获取btn的爷爷
				var tr = btn.parentNode.parentNode;
				//获取tds
				var tds = tr.children;
				//console.log(tds)
				//商品名
				var name = tds[0].innerHTML;	
				//console.log(name)
				//单价
				var price = tds[1].innerHTML;	
				//console.log(price)
				//给购物车创建一个行
				var ntr = document.createElement("tr");
				ntr.innerHTML = 
					'<td>'+name+'</td>'+
					'<td>'+price+'</td>'+
					'<td align="center">'+
						'<input type="button" value="-" onclick="decrease(this)"/>'+
						'<input type="text" size="3" readonly value="1"/>'+
						'<input type="button" value="+" onclick="indecrease(this)"/>'+
					'</td>'+
					'<td>'+price+'</td>'+
					'<td align="center"> <input type="button" value="x" onclick="del(this)"/></td>';
				
				//将此行追加到购物车后
				var tbody = document.getElementById("goods");
				tbody.appendChild(ntr);
				sum()
			}
			//删除
			function del(btn){
				btn.parentNode.parentNode.remove();
				sum()
			}
			//加法
			function indecrease(btn){
				//获取btn的哥哥
				var text = btn.previousElementSibling;
				var amount = parseInt(text.value);
				//console.log(amount)
				amount++;
				//获取单价
				text.value = amount;
				//console.log(amount)
				var td1 = btn.parentNode.previousElementSibling;
				var price = td1.innerHTML;
				//计算金额
				var money = price*amount;
				//console.log(money)
				//获取金额的td
				var td3 = btn.parentNode.nextElementSibling;
				//写入金额
				td3.innerHTML = money;
				sum()
			}
			//减法
			function decrease(btn){
				//获取btn的弟弟
				var text = btn.nextElementSibling;
				var amount = parseInt(text.value);
				//console.log(amount)
					
				if(amount <=1){
					return;
				}
				amount--;
				//获取单价
				text.value = amount;
				//console.log(amount)
				var td1 = btn.parentNode.previousElementSibling;
				var price = td1.innerHTML;
				//计算金额
				var money = price*amount;
				//console.log(money)
				//获取金额的td
				var td3 = btn.parentNode.nextElementSibling;
				//写入金额
				td3.innerHTML = money;
				sum()
			}
			//求和
			function sum(){
				//获取tbody中所有数据行
				var tbody = $("#goods");
				var trs = tbody.children();
				var n = 0;
				for(var i=0;i<trs.length;i++){
					//获取每一行中的金额
					var td3 = trs[i].children[3]
					var money = parseFloat(td3.innerHTML);
					n += money;
				}
				//将合计值写入合计列
				var td = document.getElementById("total");
				td.innerHTML = n
			}
			
		</script>
	</head>
	<body>
		<h1>真划算</h1>
		<table>
			<tr>
				<th>商品</th>
				<th>单价(元)</th>
				<th>颜色</th>
				<th>库存</th>
				<th>好评率</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>罗技M185鼠标</td>
				<td>80</td>
				<td>黑色</td>
				<td>893</td>
				<td>98%</td>
				<!-- 
					定义事件时，若传入this，他是本次事件触发的对象。
					this=正在点击的元素
				 -->
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
				</td>
			</tr>
			
			<tr>
				<td>微软x470键盘</td>
				<td>150</td>
				<td>黑色</td>
				<td>9028</td>
				<td>96%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
				</td>
			</tr>
			
			<tr>
				<td>洛克iphone13手机壳</td>
				<td>60</td>
				<td>黑色</td>
				<td>672</td>
				<td>99%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
				</td>
			</tr>
			
			<tr>
				<td>蓝牙耳机</td>
				<td>100</td>
				<td>蓝色</td>
				<td>8937</td>
				<td>95%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
				</td>
			</tr>
			<tr>
				<td>金士顿U盘</td>
				<td>70</td>
				<td>红色</td>
				<td>487</td>
				<td>100%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)"/>
				</td>
			</tr>
		</table>
		
		<h1>购物车</h1>
		<table>
			<thead>
				<tr>
					<th>商品</th>
					<th>单价(元)</th>
					<th>数量</th>
					<th>金额(元)</th>
					<th>删除</th>
				</tr>
			</thead>
			<tbody id="goods"> 
				<!-- <tr>
					<td>罗技M185鼠标</td>
					<td>80</td>
					<td align="center">
						<input type="button" value="-"/>
						<input type="text" size="3" readonly value="1"/>
						<input type="button" value="+"/>
					</td>
					<td>80</td>
					<td align="center"> <input type="button" value="x"/></td>
				</tr> -->
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3" align="right">总计</td>
					<td id="total"></td>
					<td></td>
				</tr>
			</tfoot>
			
		</table>
	</body>
</html>